<template>
  <div class="data-log-scroll" :style="{ height: height + 'px' }">
    <div class="data-log-content">
      <div class="logbox">
        <div class="log-item" v-for="(item, index) in dataList">
          <span class="log-item-icon">
            <plus-outlined v-if="lastIndex == index" style="margin-top: 3px" />
            <edit-outlined v-else />
          </span>
          <span class="log-item-content">
            <a @click="handleClickPerson">@{{ item.createName || item.createBy }}</a>
            {{ item.dataContent }}
          </span>
          <div class="log-item-date">
            <Tooltip :title="item.createTime">
              <span>{{ getDateDiff(item) }}</span>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { getModalHeight, getLogList } from './useComment';
  import { inject, ref, watchEffect } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Tooltip } from 'ant-design-vue';
  // import dayjs from 'dayjs';
  // import relativeTime from 'dayjs/plugin/relativeTime';
  // import customParseFormat from 'dayjs/plugin/customParseFormat';
  // dayjs.locale('zh');
  // dayjs.extend(relativeTime);
  // dayjs.extend(customParseFormat);

  export default {
    name: 'DataLogList',
    components: {
      PlusOutlined,
      EditOutlined,
      Tooltip,
    },
    props: {
      tableName: propTypes.string.def(''),
      dataId: propTypes.string.def(''),
      datetime: propTypes.number.def(1),
    },
    setup(props) {
      const dayjs = inject('$dayjs');
      const winHeight = getModalHeight();
      const height = ref(300);
      height.value = winHeight - 46 - 57 - 53 - 30;

      const dataList = ref([]);
      const lastIndex = ref(0);
      /**
       * 加载数据
       * @returns {Promise<void>}
       */
      async function loadData() {
        const params = {
          dataTable: props.tableName,
          dataId: props.dataId,
          type: 'comment',
        };
        const res = await getLogList(params);
        if (!res || !res.result || res.result.length == 0) {
          dataList.value = [];
          lastIndex.value = -1;
        } else {
          let arr = res.result;
          lastIndex.value = arr.length - 1;
          console.log('log-list', arr);
          dataList.value = arr;
        }
      }

      watchEffect(() => {
        if (props.datetime) {
          if (props.tableName && props.dataId) {
            console.log(props.tableName, props.dataId);
            loadData();
          }
        }
      });

      function getDateDiff(item) {
        if (item.createTime) {
          const temp = dayjs(item.createTime, 'YYYY-MM-DD hh:mm:ss');
          return temp.fromNow();
        }
        return '';
      }

      function handleClickPerson() {
        console.log('此功能未开放');
      }

      return {
        height,
        lastIndex,
        dataList,
        getDateDiff,
        handleClickPerson,
      };
    },
  };
</script>

<style lang="less" scoped>
  .data-log-scroll {
    box-sizing: border-box;
    height: 100%;
    padding-bottom: 16px;
    width: 100%;
    overflow: hidden;
    position: relative;
    overflow-y: auto;
    .data-log-content {
      /*       right: -10px;
        bottom: 0;
        left: 0;
        overflow: scroll;
        overflow-x: hidden;
        position: absolute;
        top: 0;*/
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .logbox {
        box-sizing: border-box;
        padding-left: 16px;
        .log-item {
          box-sizing: border-box;
          color: #9e9e9e;
          margin-bottom: 20px;
          padding-left: 20px;
          padding-right: 25px;
          position: relative;
          .log-item-icon {
            left: 0;
            line-height: 16px;
            position: absolute;
            top: 3px;
            vertical-align: middle;
          }
          .log-item-content {
            word-wrap: break-word;
            display: inline-block;
            font-size: 13px;
            vertical-align: middle;
            width: 100%;
            word-break: break-word;
            box-sizing: border-box;
          }
          .log-item-date {
            word-wrap: break-word;
            display: inline-block;
            font-size: 13px;
            vertical-align: middle;
            width: 100%;
            word-break: break-word;
            box-sizing: border-box;
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
